<template>
	<div>
		<div class="pb10px">
			<el-form ref="searchForm" :model="searchForm" inline>
				<el-form-item label="名称" prop="name">
					<el-input v-model="searchForm.name" clearable placeholder="请输入标题"></el-input>
				</el-form-item>
				<el-form-item label="发布状态" prop="status">
					<!-- 	<el-input v-model="searchForm.content" clearable placeholder="请输入内容"></el-input> -->
					<el-select v-model="searchForm.status" clearable placeholder="请选择发布状态">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="">
					<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜 索
					</el-button>
					<el-button icon="el-icon-refresh-left" @click="resetForm">重 置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
		<el-button type="danger" icon="el-icon-remove-outline" @click="batchDelete" :disabled="ids.length<=0">批量删除
		</el-button>
		<el-table ref="multipleTable" :data="listData" tooltip-effect="dark" fixed style="width: 100%"
			:header-cell-style="headClass" :cell-style="rowClass">
			<el-table-column type="selection" width="55"></el-table-column>
			<!-- <el-table-column prop="id" label="ID" width="50"></el-table-column> -->
			<el-table-column prop="name" label="标题"></el-table-column>
			<el-table-column label="封面图">
				<template slot-scope="scope">
					<el-image style="width: 60px; height: 60px" :src="scope.row.img"
						:preview-src-list="[scope.row.img]"></el-image>
				</template>
			</el-table-column>
			<!--            <el-table-column prop="content" label="内容"></el-table-column>-->
			<el-table-column prop="maxCount" label="报名上限人数"></el-table-column>
			<el-table-column prop="count" label="实际报名人数"></el-table-column>
			<el-table-column prop="startTime" label="发布时间" width='200'></el-table-column>
			<el-table-column prop="endTime" label="结束时间" width='200'></el-table-column>
			<el-table-column prop="type" label="报名状态">
				<template slot-scope="scope">
					<div v-if="scope.row.type == '未开始'">
						<div class="guleBox">
							未开始
						</div>
					</div>
					<div v-else-if="scope.row.type == '进行中'">
						<div class="greenBox">
							进行中
						</div>
					</div>
					<div v-else-if="scope.row.type == '已结束'">
						<div class="blueBox">
							已结束
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="发布状态">
				<template slot-scope="scope">
					<div v-if="scope.row.status == 1">
						<div class="greenBox">
							已发布
						</div>
					</div>
					<div v-else-if="scope.row.status != 1">
						<div class="guleBox">
							未发布
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="userName" label="报名创建者"></el-table-column>
			<el-table-column label="操作" width="400" fixed="right">
				<template slot-scope="scope">
					<el-button type="success" icon="el-icon-view" @click="look(scope.row.id,scope.row.name)">
						查看详情
					</el-button>
					<el-button type="primary" @click="fabu(scope.row.id,scope.row.status)" icon="el-icon-upload"
						v-if="scope.row.status != 1">
						一键发布
					</el-button>
					<el-button type="warning" @click="fabu(scope.row.id,scope.row.status)" icon="el-icon-upload"
						v-if="scope.row.status == 1">
						取消发布
					</el-button>
					<el-button icon="el-icon-edit-outline"
						@click="handleEdit(scope.$index, scope.row,scope.row.startTime,scope.row.endTime)">编辑
					</el-button>
					<el-button type="danger" icon="el-icon-remove-outline"
						@click="handleDelete(scope.$index, scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div style="margin-top: 20px">
			<el-pagination @current-change="currentChange" @size-change="sizeChange" :page-size="pageInfo.pageSize"
				:current-page="pageInfo.currentPage" background layout="sizes, prev, pager, next" :total="total">
			</el-pagination>
		</div>
		<el-dialog :title="formData.id?'编辑':'新增'" :visible.sync="isDrawerDialog" v-if="isDrawerDialog">
			<div style="margin: 10px 0px;">
				<el-steps :active="active" align-center v-if="!formData.id">
					<el-step title="基本信息"></el-step>
					<el-step title="采集信息"></el-step>
					<el-step title="预览完成"></el-step>
				</el-steps>
			</div>
			<div class="demo-drawer_content" style="padding-right: 40px;box-sizing: border-box" v-if="active == 1">
				<el-form :model="formData" :rules="rules" label-width="100px" class="demo-ruleForm" ref="formData">
					<el-form-item label="名称" prop="name">
						<el-input v-model="formData.name"></el-input>
					</el-form-item>
					<el-form-item label="报名时间" prop="time">
						<el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期"
							end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="人数上限" prop="maxCount">
						<el-input v-model="formData.maxCount" placeholder="例如:100,不输入则不限制"></el-input>
					</el-form-item>
					<el-form-item label="封面图" prop="img">
						<el-upload style="text-align: center;padding-bottom: 10px;" :action="$httpUploadFile"
							:show-file-list="false" :on-success="uploadImgSuccess">
							<img v-if="formData.img" :src="formData.img"
								style="width: 150px;height: 150px;display: block;">
							<i v-else class="el-icon-plus"
								style="font-size: 28px;color: #8c939d;width: 150px;height: 150px;line-height: 150px;text-align: center;border: 1px solid #ccc;"></i>
						</el-upload>
					</el-form-item>
					<el-form-item label="是否发布" prop="status">
						<el-radio v-model="formData.status" label="1">发布</el-radio>
						<el-radio v-model="formData.status" label="0">不发布</el-radio>
					</el-form-item>
				</el-form>
			</div>
			<div v-if="active == 2" class="activeTwoBox">
				<div class="leftBox">
					<div style="font-size: 16px;font-weight: bold;text-align: center;">基础字段</div>
					<div class="keywordBox">
						<div :class="[item.ischeck == true?'checkKeyword':'keyword']" @click="chooseKeyword(item.id)"
							v-for="item in keywordList">{{item.name}}</div>
					</div>
				</div>
				<div class="conBox">
					<div :class="[item.id == chooseId?'inputBoxBlue':'inputBoxBlack']"
						@click="choosecheckListId(item.id)" v-for="item in chooseList">
						<div class="titleBox">
							<div>{{item.name}}</div>
							<div v-if="item.id > 2" @click="delIcon(item.id)">
								<i class="el-icon-delete" style="color:#409EFF;font-size: 18px;cursor: pointer;"></i>
							</div>
						</div>
						<el-input placeholder="请输入内容" disabled></el-input>
					</div>
				</div>
				<div class="rightBox">
					<div style="font-size: 16px;font-weight: bold;text-align: center;">字段属性</div>
					<div style="display: flex;flex-direction: row;justify-content: center;" v-for="item in chooseList"
						v-if="item.id == chooseId">
						<!-- 暂时设定全部都是必填禁用,disabled -->
						<!-- <el-checkbox v-model="istrue" disabled>必填</el-checkbox> -->
						<el-checkbox v-model="item.necessary" :disabled='item.ban'>必填</el-checkbox>
					</div>
				</div>
			</div>
			<div v-if="active == 3" class="activeThreeBox">
				<div>
					<div style="font-size: 18px;font-weight:bold;">基本信息</div>
					<div class="lastWord">报名任务名称:{{formData.name}}</div>
					<div class="lastWord">报名时间: <span>{{formData.startTime}}-{{formData.endTime}}</span> </div>
					<div class="lastWord">是否发布:
						<span v-if="formData.status == 1">发布</span>
						<span v-if="formData.status == 0">不发布</span>
					</div>
				</div>
				<div>
					<div style="font-size: 18px;font-weight:bold;">采集信息</div>
					<div class="infoBox">
						<div v-for="item in chooseList">{{item.name}}</div>
					</div>
				</div>
			</div>
			<div class="demo-drawer_footer" style="display: flex; justify-content: space-around;" v-if="formData.id">
				<el-button @click="isDrawerDialog = false">取消</el-button>
				<el-button type="primary" @click="submit">提交</el-button>
			</div>
			<div class="demo-drawer_footer" style="display: flex; justify-content: space-around;" v-if="!formData.id">
				<el-button @click="back()" v-if="active > 1">上一步</el-button>
				<el-button @click="isDrawerDialog = false" v-if="active == 1">取消</el-button>
				<el-button type="primary" @click="next('formData')" v-if="active < 3">下一步</el-button>
				<el-button type="primary" @click="submit('formData')" v-if="active == 3">提交</el-button>
			</div>
		</el-dialog>

		<!-- 查看详情 -->
		<el-dialog :title="title" :visible.sync="dialogTableVisible" width="60%">
			<div style="margin: 10px auto;">
				<el-button type="success" @click="downloadText">下载模板</el-button>
				<el-button type="primary" @click="daoruDialog = true">批量导入</el-button>
			</div>
			<el-table :data="gridData" :header-cell-style="headClass" :cell-style="rowClass">
				<!-- <el-table-column property="id" label="id" width="150"></el-table-column> -->
				<el-table-column property="username" label="姓名"></el-table-column>
				<el-table-column property="gender" label="性别"></el-table-column>
				<el-table-column property="idCard" label="身份证"></el-table-column>
				<el-table-column property="mobile" label="手机号"></el-table-column>
				<el-table-column property="address" label="地址"></el-table-column>
				<el-table-column property="organization" label="组织机构"></el-table-column>
				<el-table-column property="recordTime" label="报名时间" width="150"></el-table-column>
				<el-table-column label="操作" fixed="right">
					<template slot-scope="scope">
						<el-button type="danger" icon="el-icon-remove-outline" @click="Del(scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<el-dialog title="批量导入" :visible.sync="daoruDialog">
			<el-upload ref="upload" class="upload-demo" :auto-upload="false" :on-change="handleChange"
				:before-upload="beforeUpload" :http-request="handleHttpRequest" accept=".xlsx, .xls">
				<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
				<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传文件
				</el-button>
				<div slot="tip" class="el-upload__tip">只能上传xlsx/xls文件</div>
			</el-upload>
		</el-dialog>
	</div>
</template>

<script>
	// import { forEach } from 'core-js/js/array';
	export default {
		data() {
			return {
				//抽屉控制
				isDrawerDialog: false,
				//列表数据
				listData: [],
				checked: false,
				daoruDialog:false,
				istrue: true,
				chooseId: 0,
				rules: {
					name: [{
						required: true,
						message: '请输入报名名称',
						trigger: 'blur'
					}],
					// time: [{
					// 	type: 'date',
					// 	required: true,
					// 	message: '请选择日期',
					// 	trigger: 'change'
					// }],
					// maxCount: [{
					// 	required: true,
					// 	message: '请输入人数上',
					// 	trigger: 'blur'
					// }],
					status: [{
						required: true,
						message: '请选择发布状态',
						trigger: 'change'
					}],
				},
				keyword: [],
				keywordList: [{
						id: 1,
						name: '姓名',
						keyword: 'username',
						ischeck: true,
						necessary: true,
						ban: true,
					}, {
						id: 2,
						name: '手机号',
						keyword: 'mobile',
						ischeck: true,
						necessary: true,
						ban: true,
					},
					{
						id: 3,
						name: '性别',
						keyword: 'gender',
						ischeck: false,
						necessary: false,
						ban: false,
					},
					{
						id: 4,
						name: '身份证号',
						keyword: 'idCard',
						ischeck: false,
						necessary: false,
						ban: false,
					},
					{
						id: 5,
						name: '邮箱',
						keyword: 'email',
						ischeck: false,
						necessary: false,
						ban: false,
					},
					{
						id: 6,
						name: '地址',
						keyword: 'address',
						ischeck: false,
						necessary: false,
						ban: false,
					},
					{
						id: 7,
						name: '组织机构',
						keyword: 'organization',
						ischeck: false,
						necessary: false,
						ban: false,
					},
				],
				chooseList: [{
					id: 1,
					name: '姓名',
					keyword: 'username',
					ischeck: true,
					necessary: true,
					ban: true,
				}, {
					id: 2,
					name: '手机号',
					keyword: 'mobile',
					ischeck: true,
					necessary: true,
					ban: true,
				}, ],
				time: [],
				dialogTableVisible: false,
				gridData: [],
				//总条数
				total: 0,
				title: '',
				checkId: '',
				//分页详情
				pageInfo: {
					//当前页
					pageNum: 1,
					//分页大小
					pageSize: 10
				},
				options: [{
						label: '已发布',
						value: 1
					},
					{
						label: '未发布',
						value: 0
					}
				],
				//搜索
				searchForm: {
					name: "",
					status: ''
				},
				chooseItem: {},
				active: 1,
				formData: {
					name: '',
					time: '',
					status: '',
					maxCount: ''
				},
				ids: []
			}
		},

		created() {
			this.getPageList()
		},
		methods: {
			//获取分页数据
			getPageList() {
				let data = Object.assign(this.pageInfo, this.searchForm)
				this.$axios.get("/application/page", {
					params: data,
				}).then(res => {
					res.data.data.forEach((item) => {
						let nowTime = parseInt(new Date().getTime())
						let startTime = parseInt(new Date(item.startTime).getTime())
						let endTime = parseInt(new Date(item.endTime).getTime())
						if (startTime > nowTime) {
							item.type = '未开始'
						} else if (startTime < nowTime && nowTime < endTime) {
							item.type = '进行中'
							
						} else if (nowTime > endTime) {
							item.type = '已结束'	
						}
					})
					this.listData = res.data.data
					this.total = res.data.total
				})
			},
			handleChange(file, fileList) {
				// 处理文件选择后的逻辑
			},
			beforeUpload(file) {
				const isExcel =
					file.type ===
					'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
					file.type === 'application/vnd.ms-excel';
				if (!isExcel) {
					this.$message.error('上传文件只能是 Excel 格式!');
					return false; // 阻止上传
				}
				return true; // 允许上传
			},
			handleHttpRequest(file) {
				console.log(123,file.file)
				// 这里实现自定义的上传逻辑
				// 例如，使用 axios 发送 POST 请求到服务器
				const formData = new FormData();
				formData.append('file', file.file);
				this.$axios.post('/applicationInfo/importApplicationInfo?id='+ this.checkId, formData).then(res => {
					// 处理上传成功的逻辑
					this.$message.success('上传成功!');
					console.log('上传',res)
					this.daoruDialog = false
					this.look()
					this.getPageList()
				}).catch(error => {
					// 处理上传失败的逻辑
					// this.$message.error('上传失败!');
				});
			},
			submitUpload() {
				this.$refs.upload.submit();
				// this.handleHttpRequest(file);
			},
			downloadText() {
				var a = document.createElement('a')
				a.href = 'http://kaoshi.gxkaijie.cn/api1/application.xlsx'
				console.log(a.href)
				a.download = '导入模板.xlsx'
				a.style.display = 'none'
				document.body.appendChild(a)
				a.click()
				a.remove()
			
			},
			checkNum() {
				this.active = 1
				console.log(this.active)
			},
			fabu(id, status) {
				this.formData = {}
				this.time = []
				console.log(status)
				this.$confirm('确认该操作吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.formData.id = id
					if (status != 1) {
						this.formData.status = 1
						this.$message({
							type: 'success',
							message: '发布成功!'
						});
					} else if (status == 1) {
						this.formData.status = 0
						this.$message({
							// type: 'success',
							message: '已取消发布'
						});
					}
					this.$axios.put("/application/update", this.formData).then(res => {
						if (res.code === 200) {
							this.isDrawerDialog = false
							this.getPageList()
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			},
			choosecheckListId(id) {
				this.chooseId = id
			},
			delIcon(id) {
				const indexToRemove = this.chooseList.findIndex(obj => obj.id == id);

				if (indexToRemove !== -1) {
					this.chooseList.splice(indexToRemove, 1);
					//遍历关键词数组，让点击的id字体颜色从蓝色变成黑色
					this.keywordList.forEach((item) => {
						if (item.id == id) {
							item.ischeck = false
						}
					})
				}
			},
			chooseKeyword(id) {
				// console.log('拿到的id',id)
				if (id > 2) {
					this.keywordList.forEach((item) => {
						if (item.id == id) {
							item.ischeck = true
							this.chooseItem = item
						}
					})
					const isIdMatched = this.chooseList.some(obj => obj.id == id);
					console.log(isIdMatched)
					if (!isIdMatched) {
						this.chooseList.push(this.chooseItem)
					}
				}
			},
			Del(item) {
				console.log(123123, item)
				this.$axios.post("/applicationInfo/delBatch", item).then(res => {
					if (res.code === 200) {
						this.$message({
							message: res.msg,
							type: 'success'
						});
						this.look()
						this.getPageList()
					}
				})
			},
			look(id, name) {
				if (id) {
					this.checkId = id
				}
				if (name) {
					this.title = name
				}
				let arr = {}
				arr.pageNum = this.pageInfo.pageNum
				arr.pageSize = this.pageInfo.pageSize
				arr.ids = this.checkId
				this.dialogTableVisible = true
				this.$axios.get("/applicationInfo/page", {
					params: arr
				}).then(res => {
					
					this.gridData = res.data.list
				})
			},
			resetForm() {
				this.$refs['searchForm'].resetFields();
			},
			headClass() { //表头居中显示
				return "text-align:center;font-size:14px;"
			},
			rowClass() { //表格数据居中显示
				return "text-align:center;font-size:13px;"
			},
			next(formData) {
				console.log(formData)
				if (this.active < 2) {
					this.$refs[formData].validate((valid) => {
						if (valid) {
							console.log('什么', valid)
							if (this.active++ > 2) this.active = 3;
							if (!this.formData.startTime) {
								this.formData.startTime = this.time[0]
								this.formData.endTime = this.time[1]
							}
						}
					});
				} else {
					if (this.active++ > 2) this.active = 3;
					if (!this.formData.startTime) {
						this.formData.startTime = this.time[0]
						this.formData.endTime = this.time[1]
					}
				}
			},
			back() {
				if (this.active-- < 2) this.active = 1;
				console.log(this.active)
			},
			//选择分页
			currentChange(e) {
				this.pageInfo.pageNum = e
				this.getPageList()
			},
			//改变分页数量
			sizeChange(e) {
				this.pageInfo.pageSize = e
				this.getPageList()
			},
			//搜索
			handleSearch() {
				this.pageInfo.pageNum = 1
				this.getPageList()
			},
			//提交数据
			submit() {
				console.log(112, this.formData)
				if (!this.formData.id) {
					//去掉数组里的id
					const newArr = this.chooseList.map(({
						id,
						...rest
					}) => rest);
					this.formData.infoType = newArr
					console.log(this.formData)
					// console.log(this.formData.infoType)
					this.$axios.post("/application/add", this.formData).then(res => {
						if (res.code === 200) {
							this.isDrawerDialog = false
							this.$message({
								message: res.msg,
								type: 'success'
							});
							this.getPageList()
						}
					})
				} else {
					//更新
					// console.log(this.time)
					this.formData.startTime = this.time[0]
					this.formData.endTime = this.time[1]
					this.$axios.put("/application/update", this.formData).then(res => {
						if (res.code === 200) {
							this.isDrawerDialog = false
							this.$message({
								message: res.msg,
								type: 'success'
							});
							this.getPageList()
						}
					})
				}
			},
			//添加数据
			handleAdd() {
				this.active = 1
				this.formData = {}
				this.time = []
				this.isDrawerDialog = true

			},
			//编辑
			handleEdit(index, row, startTime, endTime) {
				this.active = 1
				this.time[0] = startTime
				this.time[1] = endTime
				this.formData = Object.assign({}, row)
				this.isDrawerDialog = true
			},
			//单个删除
			handleDelete(index, row) {
				this.batchDelete([row])
			},
			//批量删除
			batchDelete(rows) {
				console.log(123, rows)
				if (!rows) {
					rows = this.$refs.multipleTable.selection;
				}
				let ids = rows.map(item => item.id);
				this.$confirm(`此操作将永久删除ID为[${ids}]的数据, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					//批量删除数据
					this.$axios.delete("/application/delBatch", {
						data: ids
					}).then(res => {
						if (res.code === 200) {
							this.$message({
								message: res.msg,
								type: 'success'
							});
							this.getPageList()
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
					this.$refs.multipleTable.clearSelection();
				});
			},
			contentChange(e) {
				this.$set(this.formData, "content", e)
			},
			uploadImgSuccess(res) {
				this.$set(this.formData, "img", res.data.url)
			},
			
		}
	};
</script>

<style scoped>
	.footer {
		display: flex;
		justify-content: space-around;
	}

	.infoBox {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.infoBox div {
		height: 35px;
		line-height: 35px;
		margin: 10px 20px 10px 0px;
		padding: 0 30px;
		font-size: 14px;
		background-color: #edfcf7;
		border-color: #dbf9f0;
		color: #4de2b3;
	}

	.activeThreeBox {
		width: 70%;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
	}

	.lastWord {
		font-size: 16px;
		color: #5d5d5d;
		margin: 5px 0px;
	}

	.lastWord span {
		color: black;
	}

	.keywordBox {}

	.keyword {
		text-align: center;
		font-size: 14px;
		margin: 10px 0px;
		cursor: pointer;
	}

	.titleBox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.inputBoxBlue {
		width: 90%;
		margin: 10px auto;
		border: 1px solid #409EFF;
		padding: 10px;

		cursor: pointer;
		border-left: 4px solid #409EFF;
	}

	.inputBoxBlack {
		width: 90%;
		margin: 10px auto;
		border: 1px solid #DCDFE6;
		padding: 10px;
		border-radius: 10px 15px;
		cursor: pointer;
	}

	.checkKeyword {
		color: #409EFF;
		text-align: center;
		font-size: 14px;
		margin: 10px 0px;
		cursor: pointer;
	}

	.activeTwoBox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 90%;
		margin: 20px auto;
	}

	::-webkit-scrollbar {
		width: 4px;
		/*  设置纵轴（y轴）轴滚动条 */
		height: 4px;
		/*  设置横轴（x轴）轴滚动条 */
	}

	/* 滚动条滑块（里面小方块） */
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: #409EFF;
	}

	/* 滚动条轨道 */
	::-webkit-scrollbar-track {
		border-radius: 0;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: gainsboro;
	}

	.leftBox {
		width: 20%;
		border: 2px solid #409EFF;
		display: flex;
		flex-direction: column;
		border-radius: 10px;
	}

	.rightBox {
		width: 20%;

		display: flex;
		flex-direction: column;
		border-radius: 10px;
		border: 2px solid #409EFF;
	}

	.conBox {
		width: 55%;
		height: 350px;
		border: 2px solid #409EFF;
		border-radius: 10px;
		overflow-y: scroll;

	}

	.greenBox {
		background-color: #67C23A;
		border-radius: 5px;
		color: white;
	}

	.guleBox {
		background-color: #909399;
		border-radius: 5px;
		color: white;
	}

	.blueBox {
		background-color: #409EFF;
		border-radius: 5px;
		color: white;
	}
</style>
